/*
 * @Date: 2023-04-19 16:10:26
 * @LastEditors: jacky02
 * @LastEditTime: 2023-04-27 21:01:03
 */
import { React, useEffect, useState} from "react";
import { Pie, Radar, Area, Heatmap } from "@antv/g2plot";
import { Menu } from "antd";

export default function G2Plot() {
  const [type, setType] = useState("pie");
  const items = [
    {
      label: "饼图",
      key: "pie",
    },
    {
      label: "雷达图",
      key: "radar",
    },
    {
      label: "面积图",
      key: "area",
    },
    {
      label: "热力图",
      key: "heat",
    },
  ];
  let piePlot = null;
  let radarPlot = null;
  let areaPlot = null;
  let heatPlot = null;

  function pie() {
    const data = [
      { type: "分类一", value: 27 },
      { type: "分类二", value: 25 },
      { type: "分类三", value: 18 },
      { type: "分类四", value: 15 },
      { type: "分类五", value: 10 },
      { type: "其他", value: 5 },
    ];
    piePlot = new Pie("container", {
      width: 800, // 图表
      appendPadding: 10,
      data,
      angleField: "value",
      colorField: "type",
      radius: 1,
      label: {
        type: "inner",
        offset: "-30%",
        content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        style: {
          fontSize: 14,
          textAlign: "center",
        },
      },
      interactions: [{ type: "element-active" }, { type: "element-selected" }],
    });
    piePlot.render();
  }
  function radar() {
    fetch("https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json")
      .then((data) => data.json())
      .then((data) => {
        radarPlot = new Radar("container", {
          width: 800, // 图表高度
          data,
          xField: "item",
          yField: "score",
          seriesField: "user",
          meta: {
            score: {
              alias: "分数",
              min: 0,
              max: 80,
            },
          },
          xAxis: {
            line: null,
            tickLine: null,
            grid: {
              line: {
                style: {
                  lineDash: null,
                },
              },
            },
          },
          yAxis: {
            line: null,
            tickLine: null,
            grid: {
              line: {
                type: "line",
                style: {
                  lineDash: null,
                },
              },
              alternateColor: "rgba(0, 0, 0, 0.04)",
            },
          },
          // 开启面积
          area: {},
          // 开启辅助点
          point: {
            size: 2,
          },
        });
        radarPlot.render();
      });
  }
  function area() {
    fetch(
      "https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json"
    )
      .then((res) => res.json())
      .then((data) => {
        areaPlot = new Area("container", {
          data,
          width: 800, // 图表高度
          xField: "date",
          yField: "value",
          seriesField: "country",
        });
        areaPlot.render();
      });
  }
  function heat() {
    fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/heatmap.json")
      .then((res) => res.json())
      .then((data) => {
        heatPlot = new Heatmap(document.getElementById("container"), {
          data,
          width: 800,
          height: 600,
          type: "density",
          xField: "g",
          yField: "l",
          colorField: "tmp",
          color:
            "#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2",
          legend: {
            position: "bottom",
          },
          annotations: [
            {
              type: "image",
              start: ["min", "max"],
              end: ["max", "min"],
              src: "https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png",
            },
          ],
        });
        heatPlot.render();
      });
  }
  function onClick({ key }) {
    setType(key);
  }
  useEffect(() => {
    switch (type) {
      case "pie":
        pie();
        break;
      case "radar":
        radar();
        break;
      case "area":
        area();
        break;
      case "heat":
        heat();
        break;
      default:
        pie();
        break;
    }
    return () => {
      //由于G2Plot是封装好的chart，不像G2只使用chart当模版每次都会构建，所以需要销毁
      piePlot && piePlot.destroy();
      radarPlot && radarPlot.destroy();
      areaPlot && areaPlot.destroy();
      heatPlot && heatPlot.destroy();
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [type]);

  return (
    <div>
      <div className="menu">
        <Menu
          onClick={onClick}
          defaultSelectedKeys={["pie"]}
          mode="horizontal"
          items={items}
        />
      </div>
      <div id="container"></div>
    </div>
  );
}
